*{
margin:0;
padding:0;
font-family: Consolas, Monaco, Lucida Console, monospace;
color:#FF4500;
}
html{height:100%;}
.bersih{clear:both;}
a:link, a:hover, a:visited { text-decoration:none; color:#888;}
.background{background:#222;
position:relative;}
#judul{
padding:0 0 0 40px;
font-size:45px;
font-weight:normal;
text-shadow: 0.04em 0.04em #000,  0.08em 0.08em #1ba29a;
font-family: Impact, Monaco, Lucida Console, monospace;
display: inline-block;
line-height:63px;
transition:all .5s ease-in-out
}
#judul span{position:relative;color:#d00;top:-10px;
font-family: Impact, Monaco, Lucida Console, monospace}
#judul:hover{color:#fff;}
#alat{
border-top:1px solid #000;
border-bottom:1px solid #222;
height:20px;
padding:10px 0 10px 50px;
box-shadow:0 5px 10px -7px rgba(0,0,0,.3),0 1px 0 0 #333 inset;
height:30px;
background: -webkit-linear-gradient(top,#fff,#efefef);
}
#code,#demo{
width:50%;
float:left;
}
#alat h2{
font-weight:normal;
text-shadow:0 1px 1px white;
color:#888;
line-height:35px;
display: inline-block;
}
#ide{
position: absolute;
top:115px;
left:0;
right:0;
bottom:0;
border-bottom:10px solid #222;
}
#editor, #preview{
width:50%;
float:left;
height:100%;
position:relative;
}
.lebar{
height:100%;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
border-right:10px solid #222;
}
#editor .container{
border-right:1px solid #e3e3e3;
bottom:0;
}
.lebar textarea,.lebar iframe,.CodeMirror{
height:100%;
width:100%;
resize:none;
border:none;
outline:none;
}
.lebar iframe{
position:absolute;
}
.CodeMirror-scroll{height:100%  !important}
.CodeMirror-gutter,.CodeMirror-lines{line-height:20px;}
::-webkit-scrollbar {
width : 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius        : 10px;
background           : #A8DAEA;
}
::-webkit-slider-thumb element,
::-webkit-scrollbar-track {
background           : white;
-webkit-border-radius: 10px;
border-radius        : 10px;
}